<template>
  <div>
    <div>游戏列表</div>

    <div
      style="padding-left: 100px"
      v-for="(item, index) in game_list"
      :key="index"
    >
      <span>{{ item.name }}</span>
      <el-button>暂停</el-button>
      <el-button>继续</el-button>
      <el-button @click="cancel(item)">取消</el-button>
      <el-button @click="download(item)">下载</el-button>
    </div>

    <div style="padding-top: 100px"></div>

    <el-button @click="setTimes">定时器</el-button>

    <el-button @click="testFun">测试</el-button>
    <el-button @click="downloadSpeed">下载速度</el-button>
    旧值：<el-input v-model="oldVal" style="width: 100px"></el-input>
    新值：<el-input v-model="newVal" style="width: 100px"></el-input>
    总体：<el-input v-model="allVal" style="width: 100px"></el-input>

    <!-- <div
      style="padding-left: 100px"
      v-for="(item, index) in Dlist"
      :key="index"
    >
      <div class="item">
        <div>{{ item.game_name }}</div>
      </div>
    </div> -->
    <div>测试定时器</div>
    <el-button @click="go">继续</el-button>
    <el-button @click="stop">暂停</el-button>
    <el-button @click="handleClear">清除定时器</el-button>

    <div v-for="(item, index) in numList" :key="index + 'a'">
      <div v-if="item == ''">没有</div>
      <div v-else>
        {{ item.name }}
        <el-input v-model="item.progress" style="width: 100px"></el-input>
        <el-button @click="handleCancel(item, index)">取消</el-button>
      </div>
    </div>
    <el-button @click="isAllEqual">判断全相同</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Dlist: [
        {
          id: 1,
          icon: "http://icon.cn",
          game_name: "梦幻小牛",
          href: "http://download123.com",
          game_id: "36",
        },
        {
          id: 2,
          icon: "http://icon.cn",
          game_name: "梦幻小牛",
          href: "http://download123.com",
          game_id: "37",
        },
        {
          id: 3,
          icon: "http://icon.cn",
          game_name: "梦幻小牛",
          href: "http://download123.com",
          game_id: "38",
        },
        {
          id: 4,
          icon: "http://icon.cn",
          game_name: "梦幻小牛",
          href: "http://download123.com",
          game_id: "39",
        },
      ],
      game_list: [
        {
          id: 1,
          game_id: 1,
          name: "小游戏1",
        },
        {
          id: 2,
          game_id: 2,
          name: "小游戏2",
        },
        {
          id: 3,
          game_id: 3,
          name: "小游戏3",
        },
        {
          id: 4,
          game_id: 4,
          name: "小游戏4",
        },
        {
          id: 5,
          game_id: 5,
          name: "小游戏5",
        },
        {
          id: 6,
          game_id: 6,
          name: "小游戏6",
        },
      ],
      times: "",
      timess: "",
      num: 0,
      progress: "",
      name: "",
      oldVal: "",
      newVal: "",
      allVal: "572",
      numList: [
        // {
        //   id: 1,
        //   name: "a1",
        //   progress: 0,
        // },
        // {
        //   id: 2,
        //   name: "b2",
        //   progress: 0,
        // },
        // {
        //   id: 3,
        //   name: "c3",
        //   progress: 0,
        // },
      ],
    };
  },
  mounted() {
    this.Dlist = JSON.parse(localStorage.getItem("Dlist")) || [];
    console.log(this.Dlist);
    // this.setTimes();
    this.getNum();
    // console.log(this.numList);
  },
  beforeRouteLeave(to, from, next) {
    console.log("离开");
    //清除定时器
    // this.numList.forEach((item) => {
    //   console.log(item.timer);
    //   clearInterval(item.timer);
    // });
    this.numList.map((item) => clearInterval(item.timer));
    next();
  },
  methods: {
    //下载
    download(item) {
      let isSame;
      let blank;
      let findIndex;
      for (let i = 0; i < this.Dlist.length; i++) {
        if (this.Dlist[i].game_id == item.game_id) {
          isSame = true;
          break;
        }
      }

      if (!isSame) {
        for (let i = 0; i < this.Dlist.length; i++) {
          if (this.Dlist[i] == "") {
            this.Dlist[i] = {
              game_name: item.name,
              game_id: item.game_id,
            };

            findIndex = this.Dlist.findIndex(
              (val) => val.game_id == item.game_id
            );
            localStorage.setItem("Dlist", JSON.stringify(this.Dlist));
            blank = true;
            break;
          }
        }
      }

      if (blank) {
        console.log("findIndex", findIndex);
        return console.log(this.Dlist);
      }

      if (isSame) {
        return console.log("该游戏正在下载");
      }

      if (this.Dlist.length >= 4) {
        return console.log("已经下载太多了");
      }

      this.Dlist.push({
        game_name: item.name,
        game_id: item.game_id,
      });

      findIndex = this.Dlist.findIndex((val) => val.game_id == item.game_id);
      localStorage.setItem("Dlist", JSON.stringify(this.Dlist));

      console.log(this.Dlist);
      console.log("findIndex", findIndex);
    },

    //取消
    cancel(item) {
      this.Dlist.map((val, index) => {
        if (val.game_id == item.game_id) this.Dlist[index] = "";
      });
      localStorage.setItem("Dlist", JSON.stringify(this.Dlist));
      console.log(this.Dlist);
    },

    //定时器
    setTimes() {
      this.timess = setInterval(() => {
        // this.progress = this.getProgress();
        console.log(this.progress);
      }, 300);
    },

    //获取进度
    getProgress() {
      let bb = 0;
      this.times = setInterval(() => {
        bb += 10;
        console.log(bb);
        // 下载完成
        if (bb > 100) {
          clearInterval(this.times);
        }
      }, 300);
      return bb;
    },

    //测试
    testFun() {
      let res = this.aa();
      console.log("res", res);
    },

    aa() {
      return this.bb();
    },

    bb() {
      if (this.name == "aa") {
        return false;
      }

      return [{ id: 1 }];
    },
    //下载速度
    downloadSpeed() {
      setInterval(() => {
        //最新值
        this.newVal = this.allVal * 0.01;
      }, 300);
    },
    //定时器数组
    getNum() {
      this.numList = [
        {
          id: 1,
          name: "a1",
          //   timer: "",
        },
        {
          id: 2,
          name: "b2",
          //   timer: "",
        },
        {
          id: 3,
          name: "c3",
          //   timer: "",
        },
      ];
      this.numList.map((item, index) => {
        // item.progress = 0;
        this.$set(this.numList[index], "progress", 0);
        item.timer = setInterval(() => {
          item.progress += 1;
          console.log(item.progress);
          if (item.progress >= 20) {
            clearInterval(item.timer);
            this.numList[index] = "";
            console.log(this.numList);
          }
        }, 300);
      });
    },
    isAllEqual() {
      let arr = [
        {
          id: 1,
          name: "giao",
        },
        "",
        {
          id: 2,
          name: "哈哈嗨",
        },
      ];
      //   let arr = ["", ""];

      let length = arr.filter((item) => item == "").length;
      if (length == arr.length) {
        console.log("全为空值");
      } else {
        console.log("有值不为空");
      }
      console.log(arr);
    },
    handleClear() {
      console.log("清除定时器");
      for (let i = 0; i < this.Dlist.length; i++) {
        console.log(this.numList[i]);
        clearInterval(this.numList[i].timer);
      }
    },
    go() {
      this.numList.map((item, index) => {
        item.timer = setInterval(() => {
          item.progress += 1;
          console.log(item.progress);
          if (item.progress >= 20) {
            clearInterval(item.timer);
            this.numList[index] = "";
            console.log(this.numList);
          }
        }, 300);
      });
    },
    stop() {
      this.numList.map((item) => clearInterval(item.timer));
    },
    handleCancel(item, index) {
      console.log(item);
      this.numList[index] = "";
      console.log(this.numList);
    },
  },
};
</script>

<style></style>
